<!DOCTYPE html>
<html lang="en">
<head>
  {include file="common/meta" /}
  <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico"/>
  <link href="__CDN__/assets/css/mbti.css" rel="stylesheet">
</head>
<body>
<div class="content">
  <div class="media">
    {if $scene.media_type === "image"}
    <img class="img-responsive center-block" src="{$scene.media|cdnurl}" />
    {/if}
    {if $scene.media_type === "video"}
    <video class="media_video" src="{$scene.media|cdnurl}" controls autoplay></video>
    {/if}
  </div>
  <div class="process_fraction">
    <div class="numerator" id="numerator">1</div>
    <div class="denominator">/{:count($questionList)}</div>
  </div>
  <div class="progress">
    <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="<?php echo 100/(count($questionList) > 0 ? count($questionList) : 1) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo 100 / (count($questionList) > 0 ? count($questionList) : 1) ?>%;"></div>
  </div>
  <div class="survey">
    {volist name="questionList" id="v"}
    <div class='evaluate {eq name="key" value="0" }show{/eq}' id="index_box_{$key+1}" data-index="{$key+1}">
      <div class="question">{$key+1}、{$v}</div>
      <div class='answers' data-answer="A">{$aList[$key]}</div>
      <div style="margin-top: 12px;" data-answer="B" class='answers'>{$bList[$key]}</div>
    </div>
    {/volist}
  </div>
  <div class="direction">
    <div class="previous"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> 上一题</div>
    <div class="next">下一题 <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
  </div>
  <div class="get_result hidden" id="get_result">
    {if $wx_config}
    <wx-open-launch-weapp
      id="launch-btn"
      appid="{$Think.config.site.applet_appid}"
      path="{$Think.config.site.applet_path}"
      env-version="{$Think.config.app_debug?'trial':'release'}"
      style="
        width: 90%;
        height: 41px;
        margin: 0 auto;
      "
    >
      <script type="text/wxtag-template">
        <style>
          .open_mp {
            width: 100%;
            height: 41px;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            border: none;
            white-space: nowrap;
            font-size: 20px;
            line-height: 41px;
            border-radius: 21.5px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            color: #fff;
            background: linear-gradient(270deg, #BE78E8 0%, #EDA9FE 100%);
          }
          .open_mp:focus,
          .open_mp:active:focus,
          .open_mp.active:focus,
          .open_mp.focus,
          .open_mp:active.focus,
          .open_mp.active.focus {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
          }
          .open_mp:hover,
          .open_mp:focus,
          .open_mp.focus {
            text-decoration: none;
            color: #fff;
            background: linear-gradient(270deg, #BE78E8 0%, #EDA9FE 100%);
            border: none;
          }
        </style>
        <button class="open_mp">查看结果</button>
      </script>
    </wx-open-launch-weapp>
    {/if}
  </div>
</div>
{include file="common/script" /}
</body>
</html>